<template>
  <div class="singleBar-chat-container" ref="singleBar-chart" ></div>
</template>
<script>
import echarts from "echarts";
import { option, handlerOptions } from "./config.js";
let that;
export default {
  name: "data-v-singleBar",
  props: {
    chartOptions: {
      type: Object,
      default: () => {},
    },
  },
  watch: {
    chartOptions: (newVal) => {
      that.setOptions(newVal);
    },
  },
  data() {
    return {
      option,
      chart: null,
      circle: null,
    };
  },
  methods: {
    init() {
      const dom = this.$refs["singleBar-chart"];
      this.chart = echarts.init(dom);
      this.chart.setOption(this.option);
      window.addEventListener("resize",this.chart.resize);
    },
    setOptions(newConfig) {
      handlerOptions(this.chart, newConfig);
    },
  },
  created() {
    that = this;
  },
  mounted() {
    this.init();
  },
};
</script>
<style src='./index.css' scoped></style>